<!--
  实时数据监测
 -->

<template>
  <BaseMainSlot>
    <template v-slot:zhactbar> </template>
    <template v-slot:farmtypeselectslot>
      <energy @topitemtype="topitemtype" />
    </template>
    <template v-slot:content>
      <!-- 页面 -->
      <div class="Dmain">
        <!-- 设备电表选择 -->
        <div class="Meter-selection">
          <p>{{ showName }}</p>
          <!-- 饲料搅拌机列表 -->
          <div class="list" @scroll="scrollEvent">
            <div
              v-for="(item, index) in list"
              :key="index"
              :class="activeClass === index ? 'list-contents' : 'list-content'"
              @click="active(item, index)"
            >
              {{ item.energyEquipmentName }}
            </div>
          </div>
        </div>
        <!-- 右边折线图 -->
        <div class="line">
          <!-- 能耗量柱状图 -->
          <div class="top-line">
            <p>{{ oneEnergy }}</p>
            <div class="content">
              <div class="content-line">
                <Echartsone
                  :cdata="barObject"
                  nowwidth="100%"
                  nowheight="100%"
                />
                <!-- <div id="myChart" style="width: 100%; height: 100%"></div> -->
                <!-- <button @click="aa">点击</button> -->
              </div>
              <div class="data">
                <div class="data2">
                  <h5>{{ dateEnergy }}</h5>
                  <h1>
                    <!-- {{ dateEnergyNum }} -->
                    {{ dateEnergyNum }}<span>{{ dateEnergyUnit }}</span>
                  </h1>
                </div>
              </div>
            </div>
          </div>
          <!-- 能耗积累量折线图 -->
          <div class="bot-line">
            <p>{{ twoEnergy }}</p>
            <div class="content">
              <div class="content-line">
                <Echartsone
                  :cdata="lineObject"
                  nowwidth="100%"
                  nowheight="100%"
                />
                <!-- <div id="main" style="width: 100%; height: 100%"></div> -->
              </div>
              <div class="data">
                <div class="data2">
                  <h5>{{ addEnergy }}</h5>
                  <h1>
                    {{ addEnergyNum }}<span>{{ dateEnergyUnit }}</span>
                  </h1>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </BaseMainSlot>
</template>

<script>
import energy from "../components/historyButton/index.vue";
import BaseMainSlot from "@/components/BaseMainSlot/baseone.vue";
import { mymixin } from "@/utils/mixin";
import Clickoutside from "element-ui/src/utils/clickoutside";
import req from "@/api/digital-operation/detection-manage-ment/detection-type-manage";
import Echartsone from "@/components/Echarts/components/barechart/chart.vue";
import * as echarts from "echarts";

export default {
  components: { BaseMainSlot, energy, Echartsone },
  directives: { Clickoutside },
  mixins: [mymixin],
  data() {
    return {
      topitemtypeid: "",
      // 饲料搅拌机列表
      list: [],
      showName: "设备电表选择",
      // 点谁谁变色
      activeClass: 0,
      dateEnergy: "日耗能量",
      oneEnergy: "能耗量",
      dateEnergyNum: 8399.11,
      dateEnergyUnit: "kw.h",
      addEnergy: "日能耗累积量",
      twoEnergy: "能耗积累量",
      addEnergyNum: 38399.11,
      addEnergyUnit: "kw.h",
      energyCoding: '',
      // 折线图x轴数据
      lineObject: { xAxisdata: [], seriesData: [] },
      // 柱形x轴数据
      barObject: { xAxisdata: [], seriesData: [] }
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 折线方法日能耗累积量
    drawLine(energyEquipmentCoding) {
      // 根据e获取电表或者水表列表
      req.queryElectricEnergyTotal(energyEquipmentCoding).then((res) => {
        if (res.code === 1) {
          let data = res.data || {};
          if (data && data !== undefined) {
            this.addEnergyNum = data.dailyUsage.toFixed(6) || '暂无数据';
            let waterConsumption = data.waterConsumption || {};
            // let xAxisdata = [];
            // let seriesData = [];
            // for (var key in waterConsumption) {
            //   xAxisdata.push(key);
            //   seriesData.push(waterConsumption[key]);
            // }
            let xAxisdata = [];
            let seriesData = [];
            for (let zz in waterConsumption) {
              // if (zz.slice(0, 10) === Todate) {
              xAxisdata.push(zz)
              // }
            }
            xAxisdata.sort()
            xAxisdata.map(item => {
              seriesData.push(waterConsumption[item])
            })
            let dateEnergy
            if (this.energyCoding === "electricity") {
              dateEnergy = "能耗累积量";
            } else if (this.energyCoding === "running_water") {
              dateEnergy = "用水累积量";
            }
            this.lineObject = {
              xAxisdata: xAxisdata,
              font: 0,
              seriesData: [
                {
                  data: seriesData,
                  type: "line",
                  smooth: true,
                  name: dateEnergy,
                  symbol: "circle",
                  symbolSize: "8",
                  itemStyle: {
                    normal: {
                      color: "#1bdaf8", // 折线点的颜色
                      lineStyle: {
                        color: "#2CD1E4" // 折线的颜色
                      }
                    }
                  }
                }
              ]
            };
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 柱形方法日耗能量
    drawBar(energyEquipmentCoding) {
      // console.log(111)
      (req.queryElectricEnergyForDays(energyEquipmentCoding) || req.queryElectricEnergyForDay(energyEquipmentCoding)).then((res) => {
        if (res.code === 1) {
          let data = res.data || {};
          // console.log(data);
          if (data && data !== undefined) {
            // let myDate = new Date();
            // let Todate = this.dateToFormattwo(myDate)

            // let xAxisdata = [];
            // let seriesData = [];
            // for (let zz in waterConsumption) {
            //   if (zz.slice(0, 10) === Todate) {
            //     xAxisdata.push(zz)
            //   }
            // }
            // xAxisdata.sort()
            // xAxisdata.map(item => {
            //   seriesData.push(waterConsumption[item])
            // })
            this.dateEnergyNum = data.dailyUsage.toFixed(2) || "暂无数据";
            let waterConsumption = data.waterConsumption || {};
            // let xAxisdata = [];
            // let seriesData = [];
            // for (var key in waterConsumption) {
            //   xAxisdata.push(key);
            //   seriesData.push(waterConsumption[key]);
            // }
            // let myDate = new Date();
            // let Todate = this.dateToFormattwo(myDate)

            let xAxisdata = [];
            let seriesData = [];
            for (let zz in waterConsumption) {
              // if (zz.slice(0, 10) === Todate) {
              xAxisdata.push(zz)
              // }
            }
            xAxisdata.sort()
            xAxisdata.map(item => {
              seriesData.push(waterConsumption[item])
            })
            xAxisdata = xAxisdata.slice(xAxisdata.length - 120)
            seriesData = seriesData.slice(seriesData.length - 120)
            let dateEnergy
            if (this.energyCoding === "electricity") {
              dateEnergy = "能耗量";
            } else if (this.energyCoding === "running_water") {
              dateEnergy = "日用水量";
            }
            this.barObject = {
              xAxisdata: xAxisdata,
              seriesData: [
                {
                  data: seriesData,
                  type: "bar",
                  smooth: true,
                  name: dateEnergy,
                  barMaxWidth: 40 // 柱图宽度
                }
              ]
            };
          }
        } else {
          this.$message.error(res.msg);
        }
      });
      let chartDom = document.getElementById("main");
      let myChart = echarts.init(chartDom);
      let option = {
        xAxis: {
          type: "category",
          data: this.lineChartX,
          axisLabel: {
            rotate: -40
          },
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          }
        },
        series: [
          {
            symbol: "circle",
            symbolSize: "8",
            data: this.lineChartY,
            type: "line",
            // eslint-disable-next-line no-dupe-keys
            symbol: "circle", // 折线点设置为实心点
            // eslint-disable-next-line no-dupe-keys
            symbolSize: 8, // 折线点的大小
            itemStyle: {
              normal: {
                color: "#1bdaf8", // 折线点的颜色
                lineStyle: {
                  color: "#2CD1E4" // 折线的颜色
                }
              }
            }
          }
        ],
        grid: {
          x: 30,
          y: 60,
          x2: 50,
          y2: 75
        }
      };
      option && myChart.setOption(option);
    },
    // 获取点击的分页index
    topitemtype(e, energyCoding) {
      this.topitemtypeid = e;
      this.lineObject = { xAxisdata: [], seriesData: [] };
      this.barObject = { xAxisdata: [], seriesData: [] };
      // 获取表格数据
      this.addEnergyNum = "";
      this.dateEnergyNum = "";
      this.energyCoding = energyCoding
      if (energyCoding === "electricity") {
        this.showName = "设备电表选择";
        this.dateEnergy = "日耗能量";
        this.dateEnergyUnit = "kw.h";
        this.addEnergy = "日能耗累积量";
        this.oneEnergy = "能耗量";
        this.twoEnergy = "能耗累积量";
      } else if (energyCoding === "running_water") {
        this.showName = "设备水表选择";
        this.dateEnergy = "日用水量";
        this.dateEnergyUnit = "m3/h";
        this.addEnergy = "累积用量";
        this.oneEnergy = "用水量";
        this.twoEnergy = "用水累积量";
      }
      let params = {
        entity: {
          energyTypeId: e
        },
        page: 1,
        size: 1000
      };
      // 根据e获取电表或者水表列表
      req.getEnergyWatch(params).then((res) => {
        if (res.code === 1) {
          let data = res.data || {};
          this.list = data.content || [];
          if (this.list.length > 0) {
            this.active(this.list[0], 0);
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 点谁谁变色
    active(item, index) {
      this.lineObject = { xAxisdata: [], seriesData: [] };
      this.barObject = { xAxisdata: [], seriesData: [] };
      // 获取表格数据
      this.addEnergyNum = "";
      this.dateEnergyNum = "";
      this.activeClass = index;
      // 根据电表名字显示柱状图跟折线图(上面是柱形图。下面是折线图)

      this.drawLine(item["energyEquipmentCoding"]);
      this.drawBar(item["energyEquipmentCoding"]);
    },
    scrollEvent(e) {
      if (
        e.srcElement.scrollHeight -
          e.srcElement.scrollTop -
          e.srcElement.clientHeight <
        0.3
      ) {
        // console.log("嘿嘿我在底部触发了");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
// 隐藏滚动条
::-webkit-scrollbar {
  display: none;
}
@import "~@/styles/variables.scss";
::v-deep .common-layout {
  border: 1px dashed rgba(14, 196, 151, 1) !important;
  .zhcontent {
    height: calc(100% - 15px) !important;
  }
}
::v-deep .w50p {
  width: 50% !important;
}
// 页面布局
.Dmain {
  width: 100%;
  height: 100%;
  // background-color: red;
  display: flex;
  justify-content: space-between;
  .Meter-selection {
    width: 10%;
    height: 100%;
    p {
      width: 90%;
      height: 50px;
      margin: 0 auto;
      font-size: 16px;
      text-align: center;
      line-height: 50px;
      border-bottom: 1px dashed rgb(0, 144, 179);
    }
    .list {
      width: 90%;
      height: 90%;
      margin: 0 auto;
      margin-top: 20px;
      overflow-y: auto;
      .list-content {
        cursor: pointer;
        width: 100%;
        height: 50px;
        font-size: 14px;
        text-align: center;
        line-height: 50px;
        border: 1px solid #fff;
      }
      .list-contents {
        cursor: pointer;
        width: 100%;
        height: 50px;
        font-size: 14px;
        text-align: center;
        line-height: 50px;
        border: 1px solid #fff;
        background-color: rgb(0, 144, 179);
      }
    }
  }
  .line {
    width: 89%;
    height: 100%;
    // background-color: grey;
  }
  .top-line {
    width: 100%;
    height: 50%;
    // background-color: red;
    position: relative;
    overflow: hidden;
    p {
      // border: 1px solid rgb(12, 249, 247);
      text-align: center;
      line-height: 30px;
      position: absolute;
      top: 15px;
      right: 50%;
      margin: 0;
      transform: translate(50%, 0);
      width: 120px;
      height: 30px;
      background-image: url('~@/assets/kuang.png');
      background-size:cover;
      background-size:100% 120%;
      background-repeat: no-repeat;
      // background-position: (-5px,0);
      // clip-path: polygon(
      //   15px 0px,
      //   0px 15px,
      //   15px 30px,
      //   85px 30px,
      //   100px 15px,
      //   85px 0px
      // );
      background-color: rgb(3, 59, 79);
    }
    .content {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 30px;
      height: 90%;
      border: 1px solid rgb(44, 209, 298);
      border-radius: 10px;
      // background-color: rgb(0, 144, 179);
      .content-line {
        width: 75%;
        height: 100%;
        // background-color: rosybrown;
      }
      .data {
        border-radius: 10px;
        margin-top: 50px;
        width: 20%;
        height: 60%;
        border: 1px solid rgb(9, 251, 249);
        background-image: url('~@/assets/mb1.png');
        background-repeat: no-repeat;
        background-position: 100% 100%;
        // background-color: rgb(1,60,75);
        // background-color:red;
        .data2 {
          background-image: url('~@/assets/mb2.png');
          background-repeat: no-repeat;
          background-position: 0% 100%;
        }
        h5 {
          border: 1px solid rgb(9, 251, 249);
          border-radius: 20px;
          width: 70%;
          height: 30px;
          line-height: 30px;
          margin: 0 auto;
          margin-top: -12px;
          font-size: 16px;
          color: rgb(44, 209, 298);
          text-align: center;
          background-color: rgb(1, 60, 75);
          // background-color: red;
        }
        h1 {
          margin-top: 50px;
          font-weight: normal;
          text-align: center;
          span {
            font-size: 18px;
          }
        }
      }
    }
  }
  .bot-line {
    position: relative;
    width: 100%;
    height: 50%;
    // background-color: green;
    overflow: hidden;
    p {
      // border: 1px solid rgb(12, 249, 247);
      text-align: center;
      line-height: 30px;
      position: absolute;
      top: 15px;
      right: 50%;
      margin: 0;
      transform: translate(50%, 0);
      width: 120px;
      height: 30px;
      background-image: url('~@/assets/kuang.png');
      background-size:cover;
      background-size:100% 120%;
      background-repeat: no-repeat;
      // background-position: (-5px,0);
      // clip-path: polygon(
      //   15px 0px,
      //   0px 15px,
      //   15px 30px,
      //   85px 30px,
      //   100px 15px,
      //   85px 0px
      // );
      background-color: rgb(3, 59, 79);
    }
    .content {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 30px;
      height: 90%;
      border: 1px solid rgb(44, 209, 298);
      border-radius: 10px;
      // background-color: rgb(0, 144, 179);
    }
    .content-line {
      width: 75%;
      height: 100%;
    }
    .data {
        border-radius: 10px;
        margin-top: 50px;
        width: 20%;
        height: 60%;
        border: 1px solid rgb(9, 251, 249);
        background-image: url('~@/assets/mb1.png');
        background-repeat: no-repeat;
        background-position: 100% 100%;
        .data2 {
          background-image: url('~@/assets/mb2.png');
          background-repeat: no-repeat;
          background-position: 0% 100%;
        }
      h5 {
        border: 1px solid rgb(9, 251, 249);
        border-radius: 20px;
        width: 70%;
        height: 30px;
        line-height: 30px;
        margin: 0 auto;
        margin-top: -12px;
        font-size: 16px;
        color: rgb(44, 209, 298);
        text-align: center;
        background-color: rgb(1, 60, 75);
      }
      h1 {
        margin-top: 50px;
        font-weight: normal;
        text-align: center;
        span {
          font-size: 18px;
        }
      }
    }
  }
}
</style>
